<!-- 轮播图 -->
<template>
    <div class="wrapper-left">
        <el-carousel indicator-position="outside" @change="getGid">
            <el-carousel-item v-for="item in bookArr" :key="item.id" class="wrapperImg">
                <router-link :to="{path:'',query:{id:item.id}}">
                    <div>
                        <img :src="item.cover" alt="">
                    </div>
                </router-link>
            </el-carousel-item>
        </el-carousel>
    </div>

</template>

<script lang="ts">
import { getgoodsInfo } from '@/utils/api';
import { defineComponent } from 'vue';
interface bookInfo {
    id: number;
    title: string,
    author: string,
    price: number,
    publisiher: string,
    pubTime: string,
    fofio: string,
    physiognomy: string,
    binding: string,
    cover: string
}
export default defineComponent({
    data() {
        return {
            bookArr: [] as Array<bookInfo>,
            category:1
        }
    },
    props: {
        specialId:Number
    },
    mounted() {
        if(this.specialId === 1){
            this.category = 3;
        }
        getgoodsInfo(this.category).then((res) => {            
            this.bookArr = res.data.slice(0, 6);
            this.getGid(0);
            // console.log(res);
        }).catch((error) => {
            console.log(error);
        });
        
    },
    methods: {
        getGid(value: number) {
            this.$emit('book-id', { value, infoArr: this.bookArr });
        }
    },
})
</script>

<style lang="scss" scoped>
.wrapper-left {
    width: 620px;
    height: 339px;
    background-color: #F6F6F6;
}

.wrapperImg {
    display: flex;
    justify-content: center;

    img {
        height: 330px;
    }
}
</style>